<template>
	<div class="content">
		<div class="tabber">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="全部" name="first">
					<allnew-box></allnew-box>
				</el-tab-pane>
				<el-tab-pane label="热门" name="second">
					<hotnew-box></hotnew-box>
				</el-tab-pane>
				<el-tab-pane label="置顶" name="third">
					<upnews-box></upnews-box>
				</el-tab-pane>
			</el-tabs>
			<div class="more">
				<el-dropdown trigger="click" size="small">
					<el-button type="default">
						最新帖子<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item> <span>最新帖子</span> </el-dropdown-item>
						<el-dropdown-item><span>最新回复</span></el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
	</div>
</template>

<script>
	import Allnews from './news/allnews.vue'
	import Hotnews from './news/hotnews.vue'
	import Upnews from './news/upnews.vue'
	export default {
		data() {
			return {
				activeName: 'second'
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			}
		},
		components: {
			"allnew-box": Allnews,
			"hotnew-box": Hotnews,
			"upnews-box": Upnews
		}

	}
</script>

<style lang="scss">
	//这里不加 scoped的原因因为 加了elementui会无法修改标签条的颜色
	.content {
		position: relative;
		background: #fff;
		padding-left: 30px;

		.tabber {
			width: 880px;
			line-height: 57px;
			border-bottom: 1px solid #f5f5f5;
			position: relative;

		}
		.el-button{
			padding:6px 12px;
			border-radius: 10px;
		}
		.el-tabs__item {
			font-size: 16px !important;
		}

		.more {
			position: absolute;
			right: 0px;
			top: 0px;

			.el-dropdown+.el-dropdown {
				margin-left: 15px;
			}

			.el-icon-arrow-down {
				font-size: 14px;
			}
			.el-button:focus,
			.el-button:hover {
				color: #606266;
				border-color: #dcdfe6;
				background-color: transparent;
			}
		}
	}
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
		background-color: transparent;
}
.el-dropdown-menu__item span {
	display: inline-block;
	padding: 0 10px;
}
.el-dropdown-menu__item span:hover{
	background-color: #ffd100;
	color: #333;
	border-radius: 5px;
}
.el-tabs__item.is-active{
	color: #303133;
}
.el-tabs__item{
	color: #999;
}
.el-tabs__item:hover{
	color: #ffd100;
}
.el-tabs__active-bar{
	background: #ffd100;
}
.el-tabs__nav-wrap::after{
	height: 1px;
}
</style>
